<template>
  <div>
    <!-- 结算账单列表 -->
    <div class="tabNav">
      <router-link to="/index">
        <img :src="require('/src/assets/img/sidebar1.png')" />首页
      </router-link>
      <b class="colors"
        >/<img :src="require('/src/assets/img/caiwu.png')" />财务管理</b
      >
      <b><span class="fenge">/</span>账单结算</b>
    </div>
    <!-- <el-card class="cardTits" shadow="hover">
      <acceptance-task></acceptance-task>
    </el-card> -->
    <div class="task-box">
      <div class="nav">
        <div class="nav-item" @click="activeNav = index" v-for="(item, index) in navArr" :key="index" :class="[index == activeNav ? 'active' : '']">
          <span>{{ item }}</span>
          <div class="back"></div>
          <div class="back-active"></div>
        </div>
        <div class="animate-border" :style="{'left': 'calc('+ activeNav*140 +'px + 50px)'}"></div>
      </div>
      <billing-list :taskType="''" v-if="activeNav == 0"></billing-list>
      <billing-list :taskType="0" v-if="activeNav == 1"></billing-list>
      <billing-list :taskType="1" v-if="activeNav == 2"></billing-list>
      <billing-list :taskType="2" v-if="activeNav == 3"></billing-list>
      <billing-list :taskType="3" v-if="activeNav == 4"></billing-list>
    </div>
  </div>
</template>

<script>
import BillingList from "../../components/BillingList";
export default {
  name: "Billing",
  components: {
    BillingList,
  },
  data() {
    return {
      navArr: ['全部', '未结算', '未打款', '已打款', '已作废'],
      activeNav: 0,
    };
  },
  mounted() {
    // location. reload()
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.task-box {
  .nav {
    background-color: #e1e9f2;
    color: #6c8198;
    overflow: hidden;
    width: 700px;
    position: relative;
    .animate-border {
      width: 40px;
      height: 3px;
      background-color: #326CF0;
      border-radius: 2px;
      position: absolute;
      z-index: 4;
      bottom: 2px;
      transition: left .5s;
      left: 50px;
    }
    .nav-item {
      width: 140px;
      height: 40px;
      text-align: center;
      position: relative;
      line-height: 40px;
      float: left;
      cursor: pointer;
      font-size: 14px;
      span {
        z-index: 2;
        position: relative;
      }
      .back {
        transform: skew(20deg);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -1;
        background-color: #FFFFFF;
        border-radius: 2px;
      }
    }
    .nav-item.active:first-child {
      .back-active {
        background-color: #FFFFFF;
        width: 70px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .nav-item.active:nth-last-child(2) {
      .back-active {
        background-color: #FFFFFF;
        width: 70px;
        height: 40px;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .nav-item.active {
      span {
        color: #326CF0;
      }
      .back {
        z-index: 1;
      }
    }
  }
}
</style>